<template>
  <Container
    padding-left="3.125vw"
    padding-right="3.125vw"
    padding-top="0"
    padding-bottom="0"
  >
    <NavPanel
      :data="navPanelData"
      :activeId="navActiveId"
      @item-click="navItemClick"
    ></NavPanel>

    <Container padding-top="0" padding-bottom="0">
      <AppTable
        v-model:search="listParams.no"
        v-model:page="listParams.page"
        :total="listParams.total"
        :columns="tableColumns"
        :data="tableData"
        :operate="{ consult: true }"
        :placeholder="
          navCurrentIndex == 2
            ? $t('placeholder.search_part_number')
            : $t('placeholder.search_service_code')
        "
        @search="inputSearch"
        @change="getRentListData"
        @click-operate="clickConsult"
        mobile-table="card"
      >
      </AppTable>
    </Container>
  </Container>

  <!-- 咨询弹窗 -->
  <DialogService :submit_id="submit_id" ref="dialogServiceRef"></DialogService>
  <DialogMobileService
    :submit_id="submit_id"
    ref="dialogMobileServiceRef"
  ></DialogMobileService>
</template>

<script setup lang="ts">
import {
  getCurrentInstance,
  nextTick,
  onBeforeMount,
  reactive,
  ref,
  watch,
} from "vue";
import { postRentSaleCategory, postRentSaleListData } from "../../../api/rent";
import type { RentListItem, RentListPageParams } from "../../../types/rent";
import { useRoute } from "vue-router";
import { useCacheStore, useGlobalStore, useMemberStore } from "../../../store";
import { postLmList } from "../../../api/api";
import { PartColumns, ServiceColumns } from "./data";
import { message } from "ant-design-vue";
const cacheStore = useCacheStore();
const globalStore = useGlobalStore();
const memberStore = useMemberStore();
const $t = getCurrentInstance()!.appContext.config.globalProperties.$t;

const route = useRoute();

// 表格数据
const tableData = ref();
const tableColumns = ref();

// 提交咨询
const dialogServiceRef = ref();
const dialogMobileServiceRef = ref();
const submit_id = ref();
const clickConsult = ({ row: item }) => {
  if (!memberStore.profile) return message.warning($t("message.wait_login"));
  submit_id.value = item.id;
  nextTick(() => {
    if (isMobile()) {
      dialogMobileServiceRef.value.show();
    } else {
      dialogServiceRef.value.show();
    }
  });
};

const navPanelData = ref();
const navActiveId = ref();
const navCurrentIndex = ref(0);
const getNavPanelData = async () => {
  let res = await postRentSaleCategory();
  navPanelData.value = res.data.map((item) => {
    return {
      ...item,
      label: item.title,
      value: item.id,
    };
  });
  getRentListData();
};

const inputSearch = () => {
  getRentListData();
};

const navItemClick = (item, index: number) => {
  cacheStore.navPanelData.rent.index = index;
  navCurrentIndex.value = index;
  listParams.page = 1;
  listParams.no = "";
  getRentListData();
};
// rent 分页请求参数
let listParams = reactive<RentListPageParams>({
  cat_id: "",
  cond_id: "",
  no: "",
  page: 1,
  rows: 10,
  total: 0,
});
let tableCollapseData = ref<{
  headers: any[];
  items?: any[] | undefined;
}>({
  headers: [],
  items: undefined,
});
const tableColEndWidth = ref("");

const setTableCollapseHeaders = (table_type_id: number) => {
  let headers: any = [];
  if (table_type_id == 1) {
    tableColEndWidth.value = "12.5vw";
    headers = [
      {
        title: "table.rent_airport.col_1",
        width: "12.4479vw",
      },
      {
        title: "table.rent_airport.col_2",
        flex: 1,
      },
    ];
  } else if (table_type_id == 2) {
    tableColEndWidth.value = "6.25vw";
    headers = [
      {
        title: "table.rent.col_1",
        width: "5.2083vw",
      },
      {
        title: "table.rent.col_2",
        width: "7.8125vw",
      },
      {
        title: "table.rent.col_3",
        flex: 1,
      },
      {
        title: "table.rent.col_4",
        width: "5.2083vw",
      },
      {
        title: "table.rent.col_5",
        width: "6.1979vw",
      },
      {
        title: "table.rent.col_6",
        width: "8.2813vw",
      },
      {
        title: "table.rent.col_7",
        width: "6.1979vw",
      },
    ];
  }
  tableCollapseData.value.headers = headers;
};

const tableType = ref();
const getRentListData = async () => {
  tableCollapseData.value.items = undefined;
  tableData.value = undefined;
  navActiveId.value = navPanelData.value[navCurrentIndex.value].value;
  listParams.cat_id = navActiveId.value;
  let table_type_id = navPanelData.value[navCurrentIndex.value].type_id;
  const { total, ...params } = listParams;
  setTableCollapseHeaders(table_type_id);
  let res;
  if (table_type_id == 1) {
    // 普通列数据
    tableType.value = "";
    tableColumns.value = ServiceColumns;
    res = await postRentSaleListData(params);
  } else if (table_type_id == 2) {
    // 多列数据
    tableColumns.value = PartColumns;
    tableType.value = "rent";
    res = await postRentSaleListData(params);
  }
  if (res?.code === 200) {
    let items = getTableCollapseData(res.data.data || res.data, table_type_id);
    tableCollapseData.value.items = items;
    listParams.total = res.data.total;
    tableData.value = res.data.data || res.data || [];
  } else {
    nextTick(() => {
      tableCollapseData.value.items = [];
    });
  }
};

const getTableCollapseData = (data: any[], table_type_id: number) => {
  let items: any[] = [];
  if (table_type_id == 1) {
    items = data.map((item) => {
      return {
        id: item.id,
        col_1: {
          value: item.no,
        },
        col_2: {
          value: item.descri,
        },
      };
    });
  } else if (table_type_id == 2) {
    items = data.map((item) => {
      return {
        id: item.id,
        col_1: {
          value: item.id,
        },
        col_2: {
          value: item.part_no,
        },
        col_3: {
          value: item.descri,
        },
        col_4: {
          value: item.number,
        },
        col_5: {
          value: item.cond,
        },
        col_6: {
          value: item.track,
        },
        col_7: {
          value: item.air_type,
        },
      };
    });
  } else {
    items = data.map((item) => {
      return {
        id: item.id,
        col_1: {
          value: item.title,
        },
        col_2: {
          type: "address",
          value: item.title2_array,
          layout: "grid",
          colCount: 2,
        },
        col_3: {
          type: "airport",
          value: item.title3_array,
          layout: "grid",
          colCount: 2,
        },
      };
    });
  }
  return items;
};

getNavPanelData();
</script>
<style scoped lang="less"></style>
